<template>
  <div class="boxshow phone_news" v-if="partListCon">
    <!-- {{ partListCon }} -->
    <modueltitle :info="partListCon"></modueltitle>
    <div class="phone_news_body">
      <div class="phone_course_content">
        <div class="phone_course_content">
          <div class="news_list_item" v-for="(item, i) in newslist" :key="i">
            <div class="news_list_item_left">
              <p>{{ item.title }}</p>
              <div class="news_list_item_other">
                <span>
                  <van-icon style="font-size: 16px; padding-right: 5px" name="eye-o" />
                  {{ item.hit }}
                </span>
                <span>{{ item.created_time | getTimeFormat }}</span>
              </div>
            </div>
            <div class="news_list_item_right">
              <img :src="$fnc.getImgUrl(item.piclink)" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import modueltitle from "@/components/page/module/module_center/module_title_show";
export default {
  data () {
    return {
      newslist: []
    };
  },
  components: {
    modueltitle
  },
  props: {
    index: {
      type: Number,
      default: -1
    }
  },

  computed: {
    ...mapState({
      active: state => state.modulePage.active,
      bannerNowIndex: state => state.modulePage.bannerNowIndex || 0,
      allbanner: state => state.modulePage.allbanner,
      partListCon () {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
      now_status_cate () {
        try {
          return this.partListCon.text;
        } catch (error) {
          return 0;
        }
      }
    })
  },
  watch: {
    now_status_cate (to, from) {
      console.log(to);
      if (to > 0) {
        this.getnewslist(to);
      }
    }
  },
  created () { },
  mounted () { },
  methods: {
    getnewslist (id) {
      var params = {};
      params.cate_id = id;
      params.page = 1;
      params.page_size = 5;
      this.$api.getNews.getNewsList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.newslist = res.data.result.data;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.boxshow {
  width: 100%;
}
.phone_news {
  width: 100%;
  border: 1px solid transparent;
  background: #fff;
}
.phone_news_body {
  width: 94%;
  margin: 0 auto;
  position: relative;
}
.news_list_item {
  width: 100%;
  background-color: white;
  height: 95px;
  margin: 0 auto 10px auto;
  // padding: 5px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.news_list_item_right {
  width: 35%;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.news_list_item_right img {
  width: 100%;
  height: 100%;
}
.news_list_item_left {
  width: 65%;
  height: 80px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news_list_item_left p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news_list_item_other {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.news_list_item_other span {
  font-size: 12px;
  color: #a8a8a8;
}
.news_list_item_otherspan:nth-of-type(1) {
  display: flex;
  height: 20px;
}
</style>
